<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<title></title>
	<style>
		*{
	margin: 0;
	padding: 0;
	border: none;
}
html,body{
	width: 100%;
	height: 100%;
	overflow:hidden;
}
.div {
	text-align: center;
}

.div input {
	height: 40px;
}
</style>
</head>

<body>
	<!-- <div class="div">
		<input type="number" /> 
	</div> -->
	<script type="text/javascript">
		var w = document.body.clientWidth;
		var h = document.body.clientHeight;
		var canvas = document.createElement('canvas');
		canvas.width = w;
		canvas.height = h;
		document.body.appendChild(canvas);
		canvas.style.backgroundColor = "#0073B3";
		var context = canvas.getContext('2d');
		var Rot = 0;
		var R_init = 0;
		var timer = null;
		var targent_R = Math.round(w / 10);
		setInterval(function () {

			R_init = R_init + 1;
			if (R_init < targent_R + 1) {
				Drawcilrcle(context, R_init);

				if (R_init === targent_R) {
					setTimeout(function () {

						clearInterval(timer);

						timer = setInterval(function () {
							Rot = Rot + 1;
							if (Rot < 180) {
								Drawcilrcle(context, targent_R);
								Drawmove(context, targent_R, Rot);
								Drawmove_bottom(context, targent_R, Rot);
								Drawtext(context, Rot)
							}

							else if (Rot === 180) {
								Drawcilrcle(context, targent_R);
								Drawfinsh(context, targent_R, 360);
								Drawtext(context, Rot);

							}
						}, 1000);
					}, 50);
				}
			}
		}, 5);


		function Drawcilrcle(cxt, r) {
			cxt.clearRect(0, 0, w, h);
			cxt.beginPath();
			cxt.arc(w / 2, h / 2, r, 0, 2 * Math.PI);
			cxt.fillStyle = "rgba(255,255,255,0.2)";
			cxt.fill();
			cxt.beginPath();
			cxt.arc(w / 2, h / 2, r + 20, 0, 2 * Math.PI);
			cxt.strokeStyle = "rgba(0,0,0,0.2)";
			cxt.lineWidth = 1;
			cxt.stroke();
			cxt.closePath();
		}
		function Drawmove_bottom(cxt, r, rot) {
			cxt.save();
			cxt.beginPath();
			cxt.translate(w / 2, h / 2);//将画布坐标系原点移至中心
			cxt.rotate(rot / 180 * Math.PI);
			cxt.translate(-(w / 2), -(h / 2));//修正画布坐标系
			cxt.arc(w / 2, h / 2, r + 20, 0, rot / 180 * Math.PI);
			cxt.strokeStyle = "rgba(255,255,255,0.3)";
			cxt.lineWidth = 6;
			cxt.stroke();
			cxt.closePath();
			cxt.restore();
		}
		function Drawmove(cxt, r, rot) {
			cxt.save();
			cxt.beginPath();
			cxt.translate(w / 2, h / 2);//将画布坐标系原点移至中心
			cxt.rotate(rot / 180 * Math.PI);
			cxt.translate(-(w / 2), -(h / 2));//修正画布坐标系
			cxt.arc(w / 2, h / 2, r + 20, 180 / 180 * Math.PI, (rot + 180) / 180 * Math.PI);
			cxt.strokeStyle = "rgba(255,255,255,0.3)";
			cxt.lineWidth = 6;
			cxt.stroke();
			cxt.restore();
			cxt.closePath();

		}
		function Drawfinsh(cxt, r, rot) {
			cxt.save();
			cxt.beginPath();
			cxt.arc(w / 2, h / 2, r + 20, 0, 2 * Math.PI);
			cxt.strokeStyle = "rgba(255,255,255,0.3)";
			cxt.lineWidth = 6;
			cxt.stroke();
			cxt.restore();
			cxt.closePath();

		}
		function Drawtext(cxt, rot) {
			cxt.save();
			cxt.beginPath();
			cxt.textAlign = "center";
			cxt.font = " 20pt  Aira";
			cxt.fillStyle = "rgba(255,255,255,1)";
			cxt.fillText(Math.round(rot / 180 * 100) + "%", w / 2, h / 2 + 10);
			cxt.restore();
			cxt.closePath();

		}
	</script>
</body>

</html>